<template>
  <div id="content">
      <div id="map" ref="map"></div>
      <h1 id="msg"></h1>
  </div>
</template>

<script>
import "ol/css";
import { Map, View,Feature } from "ol";
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Point } from "ol/geom";
import { Style,Circle,Fill } from "ol/style";
import { Select,Draw } from "ol/interaction";
import { never } from "ol/events/condition";

export default {
  name: "AppPolygonSelect",
  data() {
      return {
      };
  },
  methods: {
  },
  mounted() {
    // 创建要素图层
    var vectorLayer = new VectorLayer({
        source: new VectorSource({
            features: [
                new Feature({
                    geometry: new Point([120.0, 30.0]),
                    name: 'A'
                }),
                new Feature({
                    geometry: new Point([120.1, 30.1]),
                    name: 'B'
                }),
                new Feature({
                    geometry: new Point([120.2, 30.2]),
                    name: 'C'
                })
            ]
        }),
        style: new Style({
            image: new Circle({
                radius: 30,
                fill: new Fill({
                    color: 'blue'
                })
            })
        })
    });

    // 创建绘制图层
    var drawLayer = new VectorLayer({
        source: new VectorSource(),
        style: new Style()
    });

    // 创建地图
    var map = new Map({
        target: 'map',
        layers: [
            vectorLayer,
            drawLayer
        ],
        view: new View({
            projection: 'EPSG:4326',
            center: [120, 30],
            zoom: 10
        })
    });

    // 创建选择工具，用于盛放多边形内的要素
    var select = new Select({
        condition: never,
        style: new Style({
            image: new Circle({
                radius: 30,
                fill: new Fill({
                    color: 'red'
                })
            })
        })
    });

    // 创建绘制多边形工具
    var drawBox = new Draw({
        source: drawLayer.getSource(),
        type: 'Polygon'
    });

    // 开始绘制，清除已有要素
    drawBox.on('drawstart', function () {
        select.getFeatures().clear();
        drawLayer.getSource().clear();
    });

    // 结束绘制
    drawBox.on('drawend', function (e) {
        if (e.feature) {
            // 获取多边形的外接矩形范围
            var polygon = e.feature.getGeometry();
            var extent = polygon.getExtent();

            // 查询外接矩形范围内的所有点
            vectorLayer.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
                var coordinates = feature.getGeometry().getCoordinates();

                // 判断该点是否在圆内部
                if (polygon.intersectsCoordinate(coordinates)) {
                    select.getFeatures().push(feature);
                }
            });

            // 遍历被选中的要素
            var selected = [];
            var selectedFeatures = select.getFeatures();
            for (var i = 0; i < selectedFeatures.getLength(); i++) {
                var feature = selectedFeatures.item(i);
                var name = feature.get('name');
                selected.push(name);
            }

            // 输出查询结果
            var msg = selected.join('、');
            document.getElementById('msg').innerText = '被选中的要素：' + msg;
        }
    });

    // 添加交互工具
    map.addInteraction(drawBox);
    map.addInteraction(select);
  }
};
</script>
<style lang="scss" scoped>
#map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/*移除OSM的链接*/
:deep(.ol-attribution){ 
    display: none;
}
</style>